<template>
    <div class="common-layout">
        <el-container>
            <!-- 左侧边栏 -->
            <el-aside>
                <!-- 展开收缩开关 -->
                <div class="switch">
                    <el-icon @click="isCollapse = !isCollapse">
                        <Expand v-if="isCollapse" />
                        <Fold v-else />
                    </el-icon>
                </div>

                <!-- 菜单组件 -->
                <el-menu class="menus" active-text-color="#ffd04b" background-color="#333" text-color="#fff"
                    default-active="/member" :collapse="isCollapse" :router="true">
                    <el-sub-menu v-for="(menu, index) in menuData" :index="index.toString()">
                        <!-- 名称为title的插槽 -->
                        <template #title>
                            <!-- 动态组件 -->
                            <el-icon>
                                <component :is="menu.icon"></component>
                            </el-icon>
                            <!-- 一级菜单名称 -->
                            <span>{{ menu.name }}</span>
                        </template>

                        <!-- 二级菜单 -->
                        <el-menu-item v-for="child in menu.children" :index="child.path">
                            <!-- 动态组件 -->
                            <el-icon>
                                <component :is="child.icon"></component>
                            </el-icon>
                            <!-- 二级菜单名称 -->
                            <span>{{ child.name }}</span>
                        </el-menu-item>
                    </el-sub-menu>

                </el-menu>
            </el-aside>

            <!-- 右侧主容器 -->
            <el-container>
                <!-- 头部 -->
                <el-header>
                    <!-- 横向菜单 -->
                    <el-menu class="hmenus" default-active="0" mode="horizontal" :ellipsis="false"
                        background-color="#f3f7ff" text-color="#393939" active-text-color="#393939">

                        <!-- logo及系统名称 -->
                        <div class="branch">
                            <div class="logo"></div>
                            <h1 class="title" style="">
                                思泰隆-健身房课程预约系统(STL-gym)</h1>
                        </div>

                        <!-- 右侧菜单 -->
                        <el-sub-menu index="1">
                            <!-- 菜单标题 -->
                            <template #title>
                                <el-icon>
                                    <Stamp />
                                </el-icon>
                                <span>未登录</span>
                            </template>

                            <!-- 下拉菜单 -->
                            <el-menu-item index="1-1">修改信息</el-menu-item>
                            <el-menu-item index="1-2">重置密码</el-menu-item>
                            <el-menu-item index="logout">退出
                                <el-icon>
                                    <SwitchButton />
                                </el-icon>
                            </el-menu-item>
                        </el-sub-menu>

                    </el-menu>
                </el-header>

                <!-- 显示视力路由 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
  
  

<style scoped>
.common-layout,
.el-container {
    height: 100%;
}

.el-header {
    padding: 0px;
    height: 80px;
}

/* 定义左边栏的宽度 */
.el-aside {
    --el-aside-width: auto;
    background-color: #333;
}

/* 侧边栏展开收缩开关 */
.el-aside>.switch {
    height: 60px;
    line-height: 60px;
    text-align: right;
    color: #FFF;
    font-size: 20px;
    margin-right: 24px;
}

.branch {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.branch>.logo {
    height: 90%;
    width: 150px;
    background: url(@/assets/logo.png) no-repeat center center/contain;
}

.branch>.title {
    padding-left: 10px;
    font-size: 24px;
    color: #393939;
}

.hmenus {
    justify-content: space-between;
    height: 80px;
}

.el-main {
    padding: 0px;
}

.el-menu {
    border-width: 0px;
}

.hmenus {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
</style>

<script setup>
import { ref } from 'vue'
// 导入路由派发器
import router from '@/router'

// 左侧菜单展开折叠标志，默认不收缩
const isCollapse = ref(false);

//菜单，非从数据库中获取
const menuData = [
    {
        name: '预约管理',
        icon: 'GobletFull',
        children: [
            { name: '预约列表', icon: 'GobletSquareFull', path: "/reserve" },
            { name: '数据统计', icon: 'TrendCharts', path: "/charts" },
        ]
    },
    {
        name: '课程管理',
        icon: 'Notebook',
        children: [
            { name: '课程列表', icon: 'Document', path: "/course" },
            { name: '课程日历', icon: 'Calendar', path: "/courseCalendar" },
        ]
    },
    {
        name: '会员管理',
        icon: 'User',
        children: [
            { name: '会员列表', icon: 'UserFilled', path: "/member" },
        ]
    },
    {
        name: '教练管理',
        icon: 'Avatar',
        children: [
            { name: '教练列表', icon: 'List', path: "coach" },
        ]
    },
    {
        name: '管理员管理', icon: 'Lock', children: [
            { name: '管理员列表', icon: 'Setting', path: "admin" },
        ]
    },
];
</script>